<template>
    <!--这里只提供线上培训视频课程的学习-->
  <el-container>
    <el-header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="课程名称:">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="课程方向:">
          <el-select v-model="option1value" placeholder="请选择">
            <el-option
              v-for="item in  option1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查找</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="课程名称"
          width="250px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程类型"
          width="250px">
          <template slot-scope="scope">
            <i class="el-icon-user-solid"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程信息"
          width="300px">
          <template slot-scope="scope">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程方向"
          width="300px">
          <template slot-scope="scope">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="课程简介"
          width="300px">
          <template slot-scope="scope">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="讲师"
          width="300px">
          <template slot-scope="scope">
            <i class="el-icon-tickets"></i>
            <span style="margin-left: 10px">{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              type="success"
              @click="goVideo('课程ID')">观看视频</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <template>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </template>
      </div>
    </el-main>
    <!--弹框-->
  </el-container>
</template>

<script>

    export default {
        name: "OnlineCoursesStudy",
      data() {
        return {
          option1: [{
            value: '选项1',
            label: '大数据'
          }, {
            value: '选项2',
            label: 'AI'
          }, {
            value: '选项3',
            label: '算法'
          }, {
            value: '选项4',
            label: 'JAVA工程师'
          }, {
            value: '选项5',
            label: '人力资源管理'
          }],
          option1value: '',
          //级联选择器数据项
          options:[{
            value: '培训班级编号',
            label: '入职培训A班',
            children:[{
              value :'培训计划编号',
              label:'入职培训计划A',
            },{
              value :'培训计划编号',
              label:'人事培训计划B',
            }]
          },{
            value: '培训班级编号',
            label: '入职培训B班',
            children:[{
              value :'培训计划编号',
              label:'人事6.13培训计划',
            },{
              value :'培训计划编号',
              label:'人事6.14培训计划',
            }]
          }],
          //已过未过选择
          radioSelect:'',
          //弹窗状态
          checkDialogTableVisible: false,
          updateDialogTableVisible:false,
          addCourseDialogTableVisible:false,
          //头部表单数据
          formInline: {
            user: '',
            region: '',
            region2:''
          },
          //表格数据
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }],
          //信息弹窗数据
          gridData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
        }
      },
      methods: {
          //进入视频观看
        goVideo(CourseID){
          this.$router.push({path:'/EmpTrainingPage/VideoPage'});
        },
        //表单提交
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        onSubmit() {
          console.log('submit!');
        },
        handleClick(row) {
          console.log(row);
        }
      }
    }
</script>

<style scoped>

</style>
